<!DOCTYPE html>
<html>
<head>
    <title>客户端服务配置</title>
    {% include 'system/common/header.html' %}
</head>  
<style>
    /* 美化文本框样式 */
    .json-textarea {
        width: 100%;
        height: 500px;
        padding: 15px;
        font-family: Monaco, Consolas, 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.6;
        color: #333;
        background-color: #fafafa;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        transition: all .3s ease;
        resize: vertical;
        box-sizing: border-box; /* 重要，确保padding包含在width之内 */
    }

    .json-textarea:focus {
        border-color: #5FB878;
        box-shadow: 0 0 0 2px rgba(95, 184, 120, .2);
        outline: none;
    }

    .json_content {
        width: 100%;
        height: 360px;
    }

    .layui-form-item {
        display: flex; /* 使用flexbox布局 */
        align-items: flex-start; /* 让其子元素顶部对齐 */
    }
    
    .layui-input-inline {
        flex-grow: 1; /* 让这个元素可以增长以填充可用空间 */
    }
    
    .layui-input-inline select {
        width: 100%; /* 确保下拉框宽度也为100% */
    }
</style>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">服务地址:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="app_server_url" class="layui-input" id="app_server_url" readonly>
                        <script>
                            // 获取当前网站的基础 URL
                            const baseUrl = window.location.origin;
                            // 设置完整的服务地址
                            document.getElementById('app_server_url').value = baseUrl + '/adminiptv/client/data/config';
                        </script>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配置文件</label>
                    <div class="layui-input-inline">
                        <select name="json_file" lay-filter="jsonFile" lay-verify="required">
                            <option value="">请选择配置文件</option>
                            {% for file in json_files %}
                            <option value="{{ file }}">{{ file }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">配置内容</label>
                    <div class="layui-input-inline"> <!-- 设置为100% -->
                        <textarea id="json_content" name="json_content" class="json-textarea" placeholder="在此输入 JSON 内容..."></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-primary" lay-submit lay-filter="save">
                            <i class="layui-icon layui-icon-save"></i>
                            保存
                        </button>
                    </div>
                </div>
                
            </form>
            
        </div>
    </div>
    

{% include 'system/common/footer.html' %}

<script>
    layui.use(['form', 'layer', 'jquery'], function() {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;

        // 监听文件选择
        form.on('select(jsonFile)', function(data) {
            if (data.value) {
                $.ajax({
                    url: '/iptvadmin/client/config/' + data.value,
                    type: 'GET',
                    success: function(res) {
                        if (res.success) {
                            // 将 JSON 数据填入 textarea 中，格式化为4个空格缩进
                            document.getElementById('json_content').value = res.data;
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('加载文件失败', {icon: 2});
                    }
                });
            } else {
                $('textarea[name="json_content"]').val(''); // 文件未选择则清空内容
            }
        });

        // 监听表单提交
        form.on('submit(save)', function(data) {
            try {
                // 验证JSON格式
                JSON.parse(data.field.json_content); // 验证 textarea 的内容
                $.ajax({
                    url: '/iptvadmin/client/config',
                    type: 'POST',
                    data: {
                        json_file: data.field.json_file,
                        json_content: data.field.json_content
                    },
                    success: function(res) {
                        if (res.success) {
                            layer.msg(res.msg, {icon: 1});
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('保存失败', {icon: 2});
                    }
                });
            } catch (e) {
                layer.msg('JSON格式错误', {icon: 2});
            }
            return false;
        });
    });
</script>

</body>
</html>